<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<script src="../static/js/jquery-1.8.3.js"></script>
<form method="POST" enctype="multipart/form-data" action="/file/upload">
    文件：<input type="file" name="file" />
    <input type="submit" value="上传" />
</form>





<form method="POST" enctype="multipart/form-data" action="/file/export">
    <input type="submit" value="导出" />
</form>

<a href="#" onclick="downloadFilebyAjax()">ajax下载文件</a> <br />

<script type="text/javascript">
    // 直接通过ajax请求文件数据
    // jquery下载文件时不能触发浏览器弹出保存文件对话框！
    // 可以在javascript中访问下载的文件数据
    function downloadFilebyAjax() {
        console.log("ajaxDownloadDirectly");
        var url = "http://localhost:8888/file/upload";
        $.ajax({
            url: url,
            type: 'post',
            data: {'fileName': "testAjaxDownload.txt"},
            success: function (data, status, xhr) {
                console.log("Download file DONE!");
                console.log(data); // ajax方式请求的数据只能存放在javascipt内存空间，可以通过javascript访问，但是无法保存到硬盘
                console.log(status);
                console.log(xhr);
                console.log("=====================");
            }
        });
    }

    // 模拟表单提交同步方式下载文件
    // 能够弹出保存文件对话框
    function downloadFileByForm() {
        console.log("ajaxDownloadSynchronized");
        var url = "http://localhost:8888/file/upload";
        var fileName = "testAjaxDownload.txt";
        var form = $("<form></form>").attr("action", url).attr("method", "post");
        form.append($("<input></input>").attr("type", "hidden").attr("name", "fileName").attr("value", fileName));
        form.appendTo('body').submit().remove();
    }
</script>


</html>